<template>
  <view>
    <view class="sear">
      <button :class="{ 'active': isActive===0 }" size="mini" @click="search(0)">未读</button>
      <button :class="{ 'active': isActive===1 }" size="mini" @click="search(1)">已读</button>
    </view>
    <view class="card" v-for="item in confList" :key="item.id">
      <uni-card :title="item.confDate+' '+item.confTitle" :extra="item.taskStat==='0'?'未读':'已读'">
        <view class="uni-body">任务：{{item.confContent}}</view>
        <view class="uni-body">负责人：{{item.nickName}}</view>
        <view class="uni-body">我的反馈：{{item.feedback? item.feedback:'未反馈'}}</view>
        <view class="uni-body">
          审批状态：{{item.feedbackStat==='1'?'已通过':item.feedbackStat==='2'?'已退回':item.feedbackStat==='3'?'已取消':'未审批'}}
        </view>
        <view class="uni-body">审批备注：{{item.reply? item.reply:'无'}}</view>
        <view class="uni-body">
          <image v-if="item.fileImg" v-for="(i,index) in item.fileImg" :key="index"
            style="width: 200rpx; height: 200rpx; background-color: #eeeeee;" mode="scaleToFill" :src="i"
            @click="preview(item.fileImg)"></image>
        </view>
        <view class="btn">
          <button type="primary" size="mini" @click="addTask(item.id)">填写反馈</button>
          <button size="mini" @click="toDetail(item.id)">查看更多反馈</button>
        </view>
      </uni-card>
    </view>
    <u-loadmore v-if="queryParams.pageNum*queryParams.pageSize>totalPage" loadmoreText="到底了~" />
  </view>
</template>

<script>
  import config from '@/config'
  import {
    listConference,
    getConference,
    delConference,
    addConference,
    updateConference,
    getRecord,
    getRecordName
  } from "@/api/system/conference";
  export default {
    data() {
      return {
        // 已读未读默认按钮未被选中
        isActive: false,
        // 查询会议表参数
        queryParams: {
          // 初始化页码为1
          pageNum: 1,
          // 条数为10
          pageSize: 10
        },
        // 总共有多少页数据
        totalPage: null,
        // 标记正在加载更多数据
        isLoadingMore: false,
        // 会议列表
        confList: [],
        // 当前用户名称 登录的用户名
        userName:this.$store.state.user.name 
      }
    },
    onShow() {
      this.getList()
    },
   
    methods: {
      // pre   要添加的前缀  paramsList   要加前缀的数组
      addFirst(pre, paramsList) {
        let arr = [];
        for (let i = 0; i < paramsList.length; i++) {
          arr.push(pre + paramsList[i]);
        }
        return arr;
      },
      // 点开大图预览
      preview(imgurl) {
        // console.log(imgurl)
        uni.previewImage({
          urls: imgurl, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
        })
      },
      async getList() {
        // console.log('执行')
        if (this.userName !== 'admin') {
          // console.log('不是admin账号')
          // 非管理员账号时，需要用当前用户去查询
          this.queryParams.name = this.userName
        }
        // console.log(this.queryParams)
        const confRes =await listConference(this.queryParams)
        // console.log(confRes)
        if (this.queryParams.pageNum === 1) {
          this.totalPage = confRes.total; // 设置总页数
          this.confList = []; // 清空之前的数据
        }
        const newData = confRes.rows || [];
        this.confList = [...this.confList, ...newData]; // 将新数据添加到已有数据的尾部
        this.confList.forEach(async (item) => {
          const feekRes = await getRecord(item.id)
          // console.log(feekRes)
          this.$set(item, "feedback", feekRes.rows[0]?.feedBack)
          this.$set(item, "feedbackStat", feekRes.rows[0]?.feedBackStat)
          this.$set(item,"reply",feekRes.rows[0]?.reply)
          if (feekRes.rows[0]?.fileImg) {
            // console.log('有图')
            // console.log(feekRes.rows[0].fileImg.indexOf(','))
            if (feekRes.rows[0].fileImg.indexOf(',') === -1) {
              feekRes.rows[0].fileImg = [feekRes.rows[0].fileImg]
              // console.log(feekRes.rows[0].fileImg)
              // console.log('单张图')
            } else {
              feekRes.rows[0].fileImg = feekRes.rows[0].fileImg.split(',')
              // console.log(feekRes.rows[0].fileImg)
              // console.log('多张图')
            }
            this.$set(item, "fileImg", this.addFirst(config.baseUrl, feekRes.rows[0].fileImg))
          }
        })
        this.isLoadingMore = false; // 结束加载状态
        // this.confList=res.rows
      },
      // 新增反馈已读并跳转页面
      async addTask(id) {
        // console.log(id)
        const res = await updateConference({id: id,taskStat: '1'})
        // console.log(res)    
        uni.navigateTo({
          url: "../taskAdd/taskAdd?id=" + id
        })
      },
      // 查看更多反馈跳转页面
      toDetail(id) {
        uni.navigateTo({
          url: '../taskAddDetail/taskAddDetail?id=' + id
        })
      },
      // 上拉加载
      onReachBottom() {
        // console.log('触发上拉加载')
        if (!this.isLoadingMore && this.queryParams.pageNum * this.queryParams.pageSize < this.totalPage) {
          this.isLoadingMore = true; // 开始加载状态       
          setTimeout(() => {
            this.queryParams.pageNum++; // 每次加载完成后自增页码
            this.getList(); // 再次请求数据
          }, 500); // 模拟异步操作需要等待一段时间才能返回数据
        }
      },
      search(spvalue){
         this.isActive = spvalue;
         
         this.queryParams.taskStat=spvalue
         this.getList()
      },
    }
  }
</script>

<style lang="less" scoped>
  .btn {
    margin-top: 15rpx;
    text-align: right;
    display: flex;
    justify-content: space-between;
  }
  .sear{
    margin: 20rpx auto;
    width: 95%;
    // border: 1px red solid;
    display: flex;
    justify-content: space-between;
  }
  /* 选中状态 */
  .sear .active {
    background-color: #aaff7f; /* 按钮选中时的背景色 */
  }
</style>